<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Button Template</title>
    <meta charset="UTF-8" />
    <!-- <script type="text/javascript" src="src/index.js"></script>
    <link rel="stylesheet" href="src/styles.css" /> -->
    <template id="my-radio">
        <label for="rad">
            <slot></slot>
        </label>
        <input type="radio" id="rad" name="test" />
    </template>

    <script type="text/javascript">
        customElements.define(
            "my-radio",
            class extends HTMLElement {
                constructor() {
                    super();
                    let template = document.getElementById("my-radio");
                    let templateContent = template.content;

                    const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
                        templateContent.cloneNode(true)
                    );
                }
            }
        );
    </script>
</head>

<body>
    <main>
        <h1>Test page</h1>
        <fieldset>
            <legend>Test legend</legend>
            <my-radio>Test radio 1</my-radio>
            <my-radio>Test radio 2</my-radio>
        </fieldset>
        </div>
    </main>
    <script>
        UnitTest = {
            ruleIds: ["WCAG20_Input_RadioChkInFieldSet"],
            results: [
          {
            "ruleId": "WCAG20_Input_RadioChkInFieldSet",
            "value": [
              "INFORMATION",
              "PASS"
            ],
            "path": {
              "dom": "/html[1]/body[1]/main[1]/fieldset[1]/my-radio[1]/#document-fragment[1]/input[1]",
              "aria": "/document[1]/main[1]/radio[1]"
            },
            "reasonId": "Pass_Grouped",
            "message": "Radio input is grouped with other related controls with the same name",
            "messageArgs": [
              "Radio"
            ],
            "apiArgs": [],
            "category": "Accessibility"
          },
          {
            "ruleId": "WCAG20_Input_RadioChkInFieldSet",
            "value": [
              "INFORMATION",
              "PASS"
            ],
            "path": {
              "dom": "/html[1]/body[1]/main[1]/fieldset[1]/my-radio[2]/#document-fragment[1]/input[1]",
              "aria": "/document[1]/main[1]/radio[2]"
            },
            "reasonId": "Pass_Grouped",
            "message": "Radio input is grouped with other related controls with the same name",
            "messageArgs": [
              "Radio"
            ],
            "apiArgs": [],
            "category": "Accessibility"
          }
        ]
        };
    </script>
</body>

</html>